<template>
  <view class="pop">
    <view class="title">全部分类</view>
    <view class="typeBox flex flex-row wrap">
      <view class="type" v-for="(item, index) in typeList" @click="setCategory(index)">
        <view><image class="img" :class="{ imageBox: currentIndex === index }" :src="item.imageUrl" /></view>
        <view :class="{ nameBox: currentIndex === index }" class="name flex a-item j-content">{{ item.name }}</view>
      </view>
      <!-- <view class="type" @click="search">
        <view><image class="img" src="http://121.41.75.32:8002/file/static/search01.png" /></view>
        <view  class="name flex a-item j-content">搜索</view>
      </view> -->
    </view>
    <view class="up" @click="close">
      <view>点击收起</view>
      <uni-icons type="up" color="" size="20" />
    </view>
  </view>
</template>

<script>
import jPopup from '../components/jPopup'
export default {
  name: 'categoryBox',
  components: { jPopup },
  props: {
    typeList: {
      type: Array,
      default: () => [],
    },
    goodsTypeIndex: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    goodsTypeIndex(n) {
      console.log('goodsTypeIndex', n)
      this.setType(this.typeList[n], n)
    },
  },
  created() {},
  data() {
    return {
      scrollLeft: 0,
      currentIndex: 0,
      marginLeft: '30rpx',
    }
  },
  methods: {
    setType(val, index) {
      this.currentIndex = index
      console.log('index', index)
      if (index <= 2) {
        this.scrollLeft = '0rpx'
        this.marginLeft = index * 130 + 30 + 'rpx'
      } else if (index >= this.typeList.length - 2) {
        this.scrollLeft = this.typeList.length * 130 + 'rpx'
        this.marginLeft = 650 - (this.typeList.length - index) * 130 + 30 + 'rpx'
      } else {
        const left = (index - 2) * 130
        this.scrollLeft = left + 'rpx'
        this.marginLeft = '300rpx'
      }
      this.$emit('change', val)
    },
    search() {
      this.$emit('search')
    },
    setCategory(index) {
      this.$emit('setCategory', index)
    },
    close() {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.pop {
  position: fixed;
  background: linear-gradient(to bottom, #e4fae8 1%, #fff 20%);
  width: 100%;
  z-index: 999;
  max-height: 800rpx;
  overflow-y: auto;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  padding-bottom: 30rpx;

  .title {
    font-size: 33rpx;
    margin-left: 20rpx;
  }
}
.typeBox {
  margin: 20rpx 0 40rpx 0;
}
.type {
  margin: 20rpx 10rpx;
  align-self: center;

  image {
    margin: 0 auto;
    width: 96rpx;
    height: 96rpx;
    border-radius: 110rpx;
  }
  .name {
    font-size: 24rpx;
    width: 130rpx;
    margin-top: 10rpx;
  }
}
.up {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid #c0c0c0;
  padding-top: 20rpx;
}
.imageBox {
  border: 2rpx solid #26bb55;
}
.nameBox {
  background: #26bb55;
  border-radius: 30rpx;
  color: #fff !important;
}
</style>
